<script lang="ts" setup name="Child2">
    import { ref } from 'vue';

    let computer = ref('Macbook Pro');
    let book = ref(6);

    // 把数据交给外部，这样Father就能访问并修改这里暴漏出去的数据
    defineExpose({ computer, book });

    function addFatherHosue(parent: any) {
        parent.house += 1;
    }
</script>

<template>
    <div class="child2">
        <h2>子组件</h2>
        <div>电脑：{{ computer }}</div>
        <div>书籍：{{ book }}本</div>
        <button @click="addFatherHosue($parent)">给父亲挣一套房产</button>
    </div>
</template>

<style scoped>
    .child2 {
        background-color: blueviolet;
        border-radius: 10px;
        padding: 5px 10px;
    }
</style>